import Vue from 'vue'
import Router from 'vue-router'

// 执行后面Router对象方法, Router源码内, 会注册router-link和router-view全局组件
// Vue扩展一个属性叫$router和$route
Vue.use(Router)

/* Layout */
// 引入Layout布局页面
import Layout from '@/layout'

// 静态路由表(路由规则对象数组)
export const constantRoutes = [
  {
    path: '/login',
    // 问题:
    // 如果都是在上面import 一起引入这些页面组件
    // 在webpack打包代码的时候, 立刻会一起打包进app.js中(出口), 然后插入到index.html执行
    // 这样就导致了首屏加载了一些本来不需要显示的其他页面组件的js相关代码
    // 导致首屏加载过慢
    // 解决方案:
    // 路由懒加载: https://v3.router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
    // Vue和webpack提供了代码分割功能
    // webpack提供了import导入函数, 可以去导入对应的组件模块
    // 原地返回的一个Promise对象
    // 写法:
    // component: () => import('组件文件路径')

    // 在webpack打包代码的时候, 就会给这些组件分成多个js文件, 而app.js里代码会变少
    // 这样导致首屏只会加载对应一个页面的js代码(加速首屏打开速度)
    // 路由页面切换命中path以后, 才会去加载其他页面的js代码
    // webpackChunkName用来定义打包dist下js文件名
    component: () =>
      import(/* webpackChunkName: "Login" */ '@/views/login/index'),
    hidden: true // 控制侧边栏是否显示此导航(不显示)
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/excel',
    component: Layout,
    redirect: '/excel/export-excel',
    name: 'Excel',
    meta: {
      title: 'Excel',
      icon: 'excel'
    },
    children: [
      {
        path: 'export-excel',
        component: () => import('@/views/excel/export-excel'),
        name: 'ExportExcel',
        meta: { title: 'Export Excel' }
      },
      {
        path: 'export-selected-excel',
        component: () => import('@/views/excel/select-excel'),
        name: 'SelectExcel',
        meta: { title: 'Export Selected' }
      },
      {
        path: 'export-merge-header',
        component: () => import('@/views/excel/merge-header'),
        name: 'MergeHeader',
        meta: { title: 'Merge Header' }
      },
      {
        path: 'upload-excel',
        component: () => import('@/views/excel/upload-excel'),
        name: 'UploadExcel',
        meta: { title: 'Upload Excel' }
      }
    ]
  },

  {
    path: '/',
    component: Layout, // 挂载App.vue中
    redirect: '/dashboard', // 默认打开项目, 默认路由地址/, 立即改变url地址栏路由地址(会重新进行路由表规则path匹配)
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'), // 挂载layout右下角(AppMain.vue中)
        meta: { title: 'Dashboard', icon: 'dashboard' } // meta固定名字(内置)
        // 用来给当前路由对象添加额外信息 (meta用于生成左侧的菜单项标题和图形)
      }
    ]
  },
  // 问题: 既然一级都是Layout, 为何不把下面的children和到上面的children里呢?
  // 答案: 首页只想要/, 例子页面让路由长/example的样子(开头)
  // 总结: 每个页面都用于不同的第一段路由地址, 看着好看

  // path: '*' 通配符
  // 浏览器地址栏url地址中, 路由地址改变时, 就会和路由表数组进行匹配
  // 路由地址, 每个对象path, 包含匹配, 如果上面没有一个路径命中的, 就会来到最后
  // 总结: 匹配除了上面地址以外的任何地址, 都命中这个规则
  // 之后, 重定向改变url地址栏里地址为/404, 重新和整个数组里对象按顺序从上到下匹配
  // 命令/404规则, 一级挂载点不是layout了而是404页面
  // 学到了一个招式(可以让地址栏地址清晰的看到404了)
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes // 传入路由规则数组(路由表)
  })

const router = createRouter() // 路由对象

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
// 最后权限设计会使用这个方法
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router // 路由对象导出
